<template>
  <div class="orderDetail">
    <div class="orderTable">
      <div class="orderBox">
        <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span
                class="ot"
                style="font-size: 1rem; font-weight: bold"
              >{{ order.cStatusName }}
              </span>
            </div>
          </div>
        </div>
        <div class="fixTitle">
          <div class="fixTitle_item">
            商品信息
          </div>
          <div class="fixTitle_item">
            操作
          </div>
        </div>
        <div
          v-for="la in order.oSaleReturnDetails"
          :key="la.id"
          class="order"
        >
          <div class="order_box">
            <div class="goods">
              <img
                :src="la.oProductAlbum.cFolder"
                alt=""
              >
              <div class="titleBox">
                <div class="tls">
                  {{ la.cProductName }}
                </div>
              </div>
            </div>

            <div
              v-if="
                order.cSaleReturnStatus != 'CONFIRMSALERETURNORDER' &&
                  order.cSaleReturnStatus != 'ENDSALERETURN' &&
                  order.cSaleReturnStatus != 'OPPOSESALERETURN' &&
                  order.cSaleReturnStatus != 'CANCELSALERETURN'
              "
              class="goods_item"
            >
              <div
                class="detail"
                @click="CancellationApplication(order)"
              >
                取消退款申请
              </div>
              <div
                class="detail"
                @click="Modify(order)"
              >
                修改
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-for="la in order.oSaleReturnDetails"
        :key="la.id"
        class="orderBox"
      >
        <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span class="ot">订单号</span>
              <span class="od">{{ la.cOrderNo }}</span>
            </div>
            <div>
              <span class="ot">退换货编号</span>
              <span class="od">{{ la.cSaleReturnNo }}</span>
            </div>

            <div>
              <span class="ot">申请时间</span>
              <span class="od">{{ la.dCreatedTime | formatDate }}</span>
            </div>
          </div>
        </div>

        <div class="orders">
          <div class="orders_box">
            <div class="leftSide">
              <div>
                <div>售后类型:</div>
                <div>{{ order.iReturnType !== 0 ? "退货退款" : "仅退款" }}</div>
              </div>
              <div>
                <div>退款原因:</div>
                <div>{{ la.reason }}</div>
              </div>
              <div>
                <div>退单备注:</div>
                <div>{{ la.description ===''?order.oSaleReturnMemo.cRemark: la.description }}</div>
              </div>
            </div>
            <div class="rightSide">
              <div>
                <div>联系人:</div>
                <div>{{ order.cReceiver }}</div>
              </div>
              <div>
                <div>联系电话:</div>
                <div>{{ order.cReceiveMobile }}</div>
              </div>
            </div>
          </div>
          <div class="fapiao">
            <!-- 温馨提示：线下支付时,退单备注请填写银行卡卡号、开户行、开户名称（请填写少于255字） -->
            注：退款退货订单只能修改一次，请谨慎填写信息！
          </div>
        </div>
      </div>
    </div>
    <deleteModal
      ref="delModal"
      @refresh="getDetail"
    />
  </div>
</template>

<script>
import deleteModal from "../../components/common/deleteModal.vue";
export default {
  components: {
    deleteModal,
  },
  data() {
    return {
      newStatus: 1,
      djs: "00天00小时00分00秒",
      iDetailId: "",
      order: {},
      salePoints: "",
      length: "",
      SmallOrder: [],
      CORDERNO: "", // O订单开头 订单号
      CSALERETURNNO: "",// R订单开头 订单号
      CSALERETURNSTATUS: "",// 订单状态
      INDEX: "", // 点击坐标
    };
  },
  mounted() {
    // cOrderNo: item.cOrderNo,
    // cSaleReturnNo: item.cSaleReturnNo,
    // index: index,
    // cSaleReturnStatus: cSaleReturnStatus,
    console.log("接收数据", this.$route.query.cSaleReturnNo, this.$route.query.cSaleReturnStatus);
    this.CORDERNO = this.$route.query.cOrderNo // O订单开头 订单号
    this.CSALERETURNNO = this.$route.query.cSaleReturnNo; // R订单开头 订单号
    this.CSALERETURNSTATUS = this.$route.query.cSaleReturnStatus // 订单状态
    this.INDEX = this.$route.query.index // 点击坐标
    if(this.CSALERETURNSTATUS === 'SUBMITSALERETURN') { // 待审批
      this.getDetail(this.CORDERNO,this.INDEX); 
    } else if(this.CSALERETURNSTATUS === 'BUYERRETURN') { // 待退款
      this.getDetail(this.CORDERNO,this.INDEX); 
    } else if(this.CSALERETURNSTATUS==='OPPOSESALERETURN') { // 驳回
      this.getSaleReturnFunction(this.CSALERETURNNO)
    } else if(this.CSALERETURNSTATUS==='CANCELSALERETURN') { // 取消退货
      this.getSaleReturnFunction(this.CSALERETURNNO)
    } else if(this.CSALERETURNSTATUS==='ENDSALERETURN'){ // 已完成
      this.getSaleReturnFunction(this.CSALERETURNNO)
    }
    
    this.getReasonContentList() //  获取退货原因
    setInterval(() => {
      var aaa = parseInt(1929253270350);
      var bbb = new Date().getTime();
      var rightTime = aaa - bbb;
      if (rightTime > 0) {
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
      }
      this.djs = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
    }, 1000);
  },
  methods: {
    // 获取订单详情
    getDetail(cOrderNo,index) {
      let params = {
					token: localStorage.getItem('token'),
					data: {
						cOrderNo: cOrderNo
					}
				};
				this.$api.person.getDetail(params).then(res => {
					if (res.code == 200) {
						console.log('获取订单商品详情',res.data);
						// this.datas = res.data;
						// this.id = res.data.oOrderDetails[index].id;
            this.getReturnDetail(res.data.oOrderDetails[index].id)
						// if (this.id != '') {
						// 	this.getReturnDetail();
						// }
					}
				});
    },
    // 获取订单详情
    getReturnDetail(id) {
      console.log('asasas', id)
      let params = {
        token: localStorage.getItem("token"),
        iDetailId: id,
      };
      this.$api.person.getSaleReturnByDetailId(params).then((res) => {
        if (res.code == 200) {
          console.log("获取订单详情", JSON.parse(JSON.stringify(res.data)));
          this.order = res.data;
        }
      });
    },
    // 取消退款详情
    getSaleReturnFunction(CSALERETURNNO) {
      let params = {
        token: localStorage.getItem("token"),
        cSaleReturnNo: CSALERETURNNO,
      };
      this.$api.person.getSaleReturnBySaleReturnNo(params).then((res) => {
        if (res.code == 200) {
          console.log("取消退款详情", JSON.parse(JSON.stringify(res.data)));
          this.order = res.data;
        }
      });
    },
    //获取退货原因
    getReasonContentList() {
      let params = {
        token: localStorage.getItem('token')
      };
      this.$api.person.getReasonContentList(params).then(res => {
        if (res.code == 200) {
          console.log('获取退货原因', res.data);
          this.reasonList = res.data;
        }
      });
    },
    // 取消退款申请CancelRefund
    CancellationApplication(items) {
      console.log("取消退款申请", items.cSaleReturnNo)
      this.$refs.delModal.showM("CancelRefund");
      this.$refs.delModal.getItem(items);
    },
    // 修改person/exchange
    Modify(items) {
      console.log('修改', items)
      this.$router.push({
        path: `/person/de-exchange?orderNo=${items.cOrderNo}&index=${this.INDEX}`,
      });
    }
  },
};
</script>

<style scoped lang="scss">
.orderDetail {
  .orderTable {
    height: auto;
    // overflow-y: scroll;
  }

  .confirm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 5rem;
    font-size: 0.88rem;
    color: #7b7b7b;
    background: #fff;
    height: 5rem;
    padding: 0 2.19rem;

    span.djs {
      color: #f0406f;
      padding: 0 0.5rem;
    }

    .opGroup {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 13rem;

      .tuihuo {
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .queren {
        background: #000;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 2.38rem;
        width: 7.44rem;
        height: 2.38rem;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .orderBox {
    // height: 15.81rem;
    background: #fff;
    margin-bottom: 0.56rem;

    .fixTitle {
      height: 3.13rem;
      background: #fff;
      line-height: 3.13rem;
      font-size: 0.88rem;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3.13rem;
      padding: 0 2.19rem;
      border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
    }

    .orderNo {
      background-color: #f6f6f6;
      height: 3rem;
      line-height: 3rem;
      display: flex;
      flex-direction: row;
      padding: 0 2.19rem;
      font-size: 0.75rem;
      justify-content: space-between;
      align-items: center;

      .cancelTips {
        color: #f0406f;
        font-size: 0.75rem;
        cursor: pointer;
      }

      .orderInfo {
        display: flex;
        flex-direction: row;

        > div {
          margin-right: 2.69rem;

          .ot {
            color: #666;
            padding-right: 0.75rem;
          }

          .od {
            color: #7b7b7b;
          }
        }
      }

      > img {
        width: 0.88rem;
        height: 0.94rem;
        vertical-align: middle;
        cursor: pointer;
      }
    }

    .orders {
      display: flex;
      flex-direction: row;
      flex-direction: column;
      margin: 0 2.19rem;
      padding: 1rem 0;
      line-height: 2.5rem;
      .orders_box {
        display: flex;
        justify-content: space-between;
        .leftSide {
          width: 30rem;

          > div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            > div {
              font-size: 0.88rem;

              &:first-child {
                color: #999;
                width: 5rem;
              }

              &:last-child {
                color: #000;
                font-weight: bold;
                width: 20rem;
                text-align: left;
              }
            }
          }
        }

        .rightSide {
          width: 15rem;

          > div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            > div {
              font-size: 0.88rem;

              &.paymoeny {
                color: #f0406f !important;
              }

              &:first-child {
                color: #999;
                width: 5rem;
                text-align: right;
              }

              &:last-child {
                color: #000;
                font-weight: bold;
                width: 10rem;
                text-align: right;
              }
            }
          }
        }
      }
    }

    .order {
      height: 9.68rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 2.19rem;
      width: 100%;
      .order_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &.goods {
            width: 27rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            .titleBox {
              width: 22rem;
            }

            .tls {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: #7b7b7b;
              font-size: 0.88rem;
              margin-bottom: 1.25rem;
              line-height: 1.2rem;
            }

            .dl {
              color: #7b7b7b;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            > img {
              width: 6rem;
              height: 6rem;
              margin-right: 0.69rem;
            }
          }
          &.goods_item {
            color: #f0406f;
            width: 12rem;
            font-size: 0.88rem;
            .detail {
              line-height: 1.44rem;
              cursor: pointer;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
          &.type {
            font-size: 0.88rem;
            color: #7b7b7b;
            width: 8rem;
            display: flex;
            flex-direction: column;
            line-height: 1.5;

            .opreate {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }

          &.orderStatus {
            width: 8rem;
            font-size: 0.88rem;
            line-height: 1.5;

            .status {
              color: #7b7b7b;
              line-height: 1.44rem;
            }

            .again {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            .prize {
              background: #000;
              color: #fff;
              padding: 0.08rem 0.88rem;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }
          }

          &.amount {
            font-size: 0.88rem;
            width: 8rem;

            .fee {
              color: #7b7b7b;
            }

            .price {
              line-height: 1.44rem;
              color: #333333;
              font-weight: bold;
            }
          }

          &.op {
            color: #7b7b7b;
            width: 8rem;
            font-size: 0.88rem;
          }
        }
      }
    }
    .fapiao {
      color: #f0406f;
      font-size: 0.88rem;

      &:hover {
        text-decoration: unset;
      }
    }
  }
}
</style>
